<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Demo</title>
<script src="${basePath}jquery-1.11.3/jquery.min.js"></script>
<script type="text/javascript">
//获取Ajax引擎象
function getAjaxEngine() {
	//Ajax引擎对象
	var ajaxEngine = null;
	//使用异常处理机制获取不同浏览器下的Ajax引擎对象
	try {
		//ff op safari 浏览器Ajax引擎
		ajaxEngine = new XMLHttpRequest();
	} catch (e) {
		// 尝试ie浏览器
		try {
			xmlHttpR = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xmlHttpR = new ActiveXObject("Microsoft.XMLHTTP")
		}
	}
	//返回ajax引擎对象
	return ajaxEngine;
}
//定义一个全局的Ajax引擎对象

var ajaxEngine=null;
function doPostAjax(){
	ajaxEngine=getAjaxEngine();
	if(ajaxEngine){
		var url="${basePath}AjaxDemoOrigialServlet";
		ajaxEngine.open("post",url,true);
		var data="txtName"+document.getElementById("txtName").value
		+"&txtAge"+document.getElementById("txtAge").value;
		ajaxEngine.setRequestHeader("Content-Type","application/x-www-form-unlencoded");
		ajaxEngine.send(data);
		ajaxEngine.onreadystatechange=doCallBack;
	}
	
}
function doCallBack(){
	if(ajaxEngine.readyState==4){
		if(ajaxEngine.status==200){
			alert("获取的服务器响应内容："+ajaxEngine.responseText);
		}else{
			alert("出现错误："+ajaxEngine.status);
		}
	}
}
</script>
<script type="text/javascript">
function doJqueryAjax() {
	$.ajax({
		   type: "POST",//请求类型
		   url: "${basePath}AjaxDemoServlet",//服务器url
		   dataType: "text",//服务器返回的数据类型
		   data:$("#myForm").serialize(),//序列化处理
		   success: function(data){//成功之后的回调函数
		     alert( "Data Saved: " + data );
		   }
		});
}
</script>
</head>
<body>
<form id="myForm">
  <div>姓名：<div><input type="text" id="txtName" name="txtName"></div></div>
  <div>年龄<div><input type="text" id="txtAge" name="txtAge"></div></div>
  <div><input type="button" value="Ajax" onclick="doJqueryAjax()"></div>
</form>
</body>
</html>